<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./Round.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Team.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Card.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Guest.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Role.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Squad.css" />
    <link rel="stylesheet" type="text/css" href="./Round_DialogPlayer.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Header.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Nav.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Toggle.css" />
    <link rel="stylesheet" type="text/css" href="./Round_Button.css" />
    <title>Squad服务器管理平台</title>
  </head>
  <body>
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="nav-item active">对局管理</div>
      <div class="nav-item">团队管理</div>
      <div class="nav-item">服务器配置</div>
      <div class="nav-item">插件管理</div>
    </div>

    <!-- 头部区域 -->
    <div class="header-container">
      <div class="header">
        <h1 class="header-title">对局管理</h1>
        <p class="header-subtitle">实时监管当前服务器内玩家行为</p>
      </div>

      <div class="header-controls">
        <button class="control-btn">平衡队伍</button>
        <button class="control-btn">随机分配</button>
        <button class="control-btn">预设下局内容</button>
        <button class="control-btn">解散全小队</button>
        <button class="control-btn">强制结束对局</button>
        <button class="control-btn">强制投票环节</button>

        <div class="toggle-container">
          <label class="toggle-switch">
            <input type="checkbox" checked />
            <span class="toggle-slider"></span>
            <span class="toggle-label">平衡人数限制</span>
          </label>
          <label class="toggle-switch">
            <input type="checkbox" checked />
            <span class="toggle-slider"></span>
            <span class="toggle-label">兵种限制</span>
          </label>
          <label class="toggle-switch">
            <input type="checkbox" checked />
            <span class="toggle-slider"></span>
            <span class="toggle-label">载具审批</span>
          </label>
          <label class="toggle-switch">
            <input type="checkbox" checked />
            <span class="toggle-slider"></span>
            <span class="toggle-label">倒计时复活</span>
          </label>
          <label class="toggle-switch">
            <input type="checkbox" />
            <span class="toggle-slider"></span>
            <span class="toggle-label">敌载具可用</span>
          </label>
          <label class="toggle-switch">
            <input type="checkbox" />
            <span class="toggle-slider"></span>
            <span class="toggle-label">载具刷新</span>
          </label>
          <label class="toggle-switch">
            <input type="checkbox" />
            <span class="toggle-slider"></span>
            <span class="toggle-label">无限制支援技能</span>
          </label>
          <label class="toggle-switch">
            <input type="checkbox" />
            <span class="toggle-slider"></span>
            <span class="toggle-label">忽略部署物规则</span>
          </label>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area" id="content-area">
      <div class="match-management">
        <div class="factions-container">
          <!-- 阵营A -->
          <div class="faction-column">
            <div class="faction-header">阵营A (美军机械化)</div>

            <div class="squads-container">
              <div class="squads-grid">
                <!-- 小队1 -->
                <div class="squad-card">
                  <div class="squad-header">
                    <div class="squad-name">Alpha 小队</div>
                    <div class="squad-meta">
                      <span>队长: [TAG]PlayerOne</span>
                      <span>建队: 12:05</span>
                    </div>
                  </div>
                  <div class="member-list">
                    <div
                      class="member-item"
                      onclick="showPlayerModal('[TAG]PlayerOne')"
                    >
                      <div class="role-icon role-squadleader"></div>
                      <div class="member-name">[TAG]PlayerOne</div>
                    </div>
                    <div
                      class="member-item"
                      onclick="showPlayerModal('Rifleman_99')"
                    >
                      <div class="role-icon role-rifleman"></div>
                      <div class="member-name">Rifleman_99</div>
                    </div>
                    <div
                      class="member-item"
                      onclick="showPlayerModal('Medic_Alpha')"
                    >
                      <div class="role-icon role-medic"></div>
                      <div class="member-name">Medic_Alpha</div>
                    </div>
                  </div>
                </div>

                <!-- 小队2 -->
                <div class="squad-card">
                  <div class="squad-header">
                    <div class="squad-name">Bravo 小队</div>
                    <div class="squad-meta">
                      <span>队长: TankCommander</span>
                      <span>建队: 12:15</span>
                    </div>
                  </div>
                  <div class="member-list">
                    <div
                      class="member-item"
                      onclick="showPlayerModal('TankCommander')"
                    >
                      <div class="role-icon role-squadleader"></div>
                      <div class="member-name">TankCommander</div>
                    </div>
                    <div
                      class="member-item"
                      onclick="showPlayerModal('GunnerPro')"
                    >
                      <div class="role-icon role-engineer"></div>
                      <div class="member-name">GunnerPro</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="unassigned-section">
              <div class="unassigned-header">未分配玩家 (3人)</div>
              <div class="unassigned-players">
                <div
                  class="player-tag"
                  data-role="squadleader"
                  onclick="showPlayerModal('US_SoloPlayer1')"
                >
                  US_SoloPlayer1
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('US_SoloPlayer2')"
                >
                  US_SoloPlayer2
                </div>
                <div
                  class="player-tag"
                  data-role="medic"
                  onclick="showPlayerModal('US_SoloPlayer3')"
                >
                  US_SoloPlayer3
                </div>
              </div>
            </div>
          </div>

          <!-- 阵营B -->
          <div class="faction-column">
            <div class="faction-header">阵营B (俄军)</div>

            <div class="squads-container">
              <div class="squads-grid">
                <!-- 小队1 -->
                <div class="squad-card">
                  <div class="squad-header">
                    <div class="squad-name">伏特加小队</div>
                    <div class="squad-meta">
                      <span>队长: [RU]SquadLead</span>
                      <span>建队: 12:10</span>
                    </div>
                  </div>
                  <div class="member-list">
                    <div
                      class="member-item"
                      onclick="showPlayerModal('[RU]SquadLead')"
                    >
                      <div class="role-icon role-squadleader"></div>
                      <div class="member-name">[RU]SquadLead</div>
                    </div>
                    <div
                      class="member-item"
                      onclick="showPlayerModal('Medic_RU')"
                    >
                      <div class="role-icon role-medic"></div>
                      <div class="member-name">Medic_RU</div>
                    </div>
                  </div>
                </div>

                <!-- 小队2 -->
                <div class="squad-card">
                  <div class="squad-header">
                    <div class="squad-name">装甲小队</div>
                    <div class="squad-meta">
                      <span>队长: [RU]TankLeader</span>
                      <span>建队: 12:20</span>
                    </div>
                  </div>
                  <div class="member-list">
                    <div
                      class="member-item"
                      onclick="showPlayerModal('[RU]TankLeader')"
                    >
                      <div class="role-icon role-squadleader"></div>
                      <div class="member-name">[RU]TankLeader</div>
                    </div>
                    <div
                      class="member-item"
                      onclick="showPlayerModal('[RU]Gunner1')"
                    >
                      <div class="role-icon role-engineer"></div>
                      <div class="member-name">[RU]Gunner1</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="unassigned-section">
              <div class="unassigned-header">未分配玩家 (4人)</div>
              <div class="unassigned-players">
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer1')"
                >
                  RU_SoloPlayer1
                </div>
                <div
                  class="player-tag"
                  data-role="medic"
                  onclick="showPlayerModal('RU_SoloPlayer2')"
                >
                  RU_SoloPlayer2
                </div>
                <div
                  class="player-tag"
                  data-role="engineer"
                  onclick="showPlayerModal('RU_SoloPlayer3')"
                >
                  RU_SoloPlayer3
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
                <div
                  class="player-tag"
                  data-role="rifleman"
                  onclick="showPlayerModal('RU_SoloPlayer4')"
                >
                  RU_SoloPlayer4
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="round.js"></script>
  </body>
</html>
